<?
header("Access-Control-Allow-Origin: *");
include 'config.inc.php';
//获取平台的get
   $username = @$_GET['username'];
   $password = @$_GET['password'];
   $cion     = @$_GET['cion'];
include 'member.php';
?>
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
 <meta name="viewport" content="width=480" />
 <head>
  <script>
 /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName("head"),viewport=document.createElement("meta"),viewport.name="viewport",viewport.content="target-densitydpi=device-dpi, width=480px, user-scalable=no",head.length>0&&head[head.length-1].appendChild(viewport));
 </script>
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 <link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>
 <script src="layer/layer.js"></script>
 <script src="layui/layui.js"> </script>
 <link rel="stylesheet" href="./css/index.css">
    <style>
      .spinner { width: 60px; height: 60px; display: inline-block; } .spinner
      .three-bounce { position: relative; text-align: center; top: 50%; bottom:
      50%; margin-top: -9px } .spinner .three-bounce>div { display: inline-block;
      width: 18px; height: 18px; border-radius: 100%; top: 50%; margin-top: -9px;
      background: #aeadba; -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:
      both; animation-fill-mode: both } .spinner .three-bounce .one { -webkit-animation-delay:
      -.32s; animation-delay: -.32s; background: rgb(55,137,250); } .spinner
      .three-bounce .two { -webkit-animation-delay: -.16s; animation-delay: -.16s;
      background: rgb(99,99,99); } .spinner .three-bounce .three { background:
      rgb(235,67,70); } @keyframes bouncedelay { 0%,100%,80% { transform: scale(0);
      -webkit-transform: scale(0) } 40% { transform: scale(1); -webkit-transform:
      scale(1) } } body, html { height: 100%; } .chat { background-size: 100%
      auto !important; }
    </style>
    <link type="text/css" rel="stylesheet" href="./css/chat-index.css">
    <link type="text/css" rel="stylesheet" href="./css/index(1).css">
    <link type="text/css" rel="stylesheet" href="./css/index-index-inde-2596aa08.css">
    <style type="text/css">
      *[data-v-5928e1c7] { -webkit-box-sizing: border-box; box-sizing: border-box;
      } .fullscreen-v-img[data-v-5928e1c7] { z-index: 9999; height: 100%; width:
      100%; position: fixed; top: 0; left: 0; overflow: hidden; background-color:
      rgba(0, 0, 0, .7); -ms-touch-action: none; touch-action: none; } .content-v-img
      img[data-v-5928e1c7] { width: auto; height: auto; max-width: 100%; max-height:
      100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:
      auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select:
      none; user-select: none; } .header-v-img[data-v-5928e1c7] { position: absolute;
      width: 100%; background-color: rgba(0, 0, 0, .3); height: 50px; z-index:
      9999; display: flex; justify-content: space-between; align-items: center;
      } .title-v-img[data-v-5928e1c7] { font-family: 'Avenir', Helvetica, Arial,
      sans-serif; font-size: 18px; font-weight: 400; color: white; text-align:
      center; max-height: 100%; overflow: auto; } .count-v-img[data-v-5928e1c7],
      .close-v-img[data-v-5928e1c7] { width: 80px; font-family: 'Avenir', Helvetica,
      Arial, sans-serif; line-height: 50px; } .count-v-img[data-v-5928e1c7] {
      font-size: 15px; color: white; margin-left: 10px; } .close-v-img[data-v-5928e1c7]
      { margin-right: 10px; color: #E5E6EB; font-size: 30px; cursor: pointer;
      -webkit-transition: color .4s ease-in-out; transition: color .4s ease-in-out;
      text-align: right; } .close-v-img[data-v-5928e1c7]:hover { color: white;
      } .prev-v-img svg[data-v-5928e1c7], .next-v-img svg[data-v-5928e1c7] {
      margin: 5px auto; } .prev-v-img[data-v-5928e1c7], .next-v-img[data-v-5928e1c7]
      { color: white; width: 35px; height: 35px; position: absolute; top: 50%;
      margin-top: -12.5px; font-size: 15px; font-family: 'Avenir', Helvetica,
      Arial, sans-serif; text-align: center; background-color: rgba(0, 0, 0,
      .3); z-index: 1000; opacity: .3; -webkit-transition: opacity .3s ease-in-out;
      transition: opacity .3s ease-in-out; cursor: pointer; } .prev-v-img[data-v-5928e1c7]:hover,
      .next-v-img[data-v-5928e1c7]:hover { opacity: 1; } .prev-v-img[data-v-5928e1c7]
      { left: 10px; } .next-v-img[data-v-5928e1c7] { right: 10px; } .v-img-fade-enter[data-v-5928e1c7],
      .v-img-fade-leave-to[data-v-5928e1c7] { opacity: 0; } .v-img-fade-enter-active[data-v-5928e1c7],
      .v-img-fade-leave-active[data-v-5928e1c7] { -webkit-transition: opacity
      .3s ease-in-out; transition: opacity .3s ease-in-out; } .body-fs-v-img
      {}
    </style>
    <link rel="stylesheet" href="css/chat.css">
	<!-- @canshu-->
  </head>
<body>
    <div id="appLoading" class="bet-loading" style="position: fixed; width: 100%; top: 200px; text-align: center; display: none;">
      <div class="spinner">
        <div class="three-bounce">
          <div class="one">
          </div>
          <div class="two">
          </div>
          <div class="three">
          </div>
        </div>
      </div>
    </div>
    <div class="skin_blue" style="height: 100%;">
      <div class="lay-relative chat">
        <!---->
        <div class="chat-header">
          <div class="ttl">
            <span id="online">
              <div style="width: 10%;display: inline-block;top: -.8rem;position: relative;">公告</div>
              <div style="width: 85%;display: inline-block;">
                <marquee scrollamount="3">欢迎使用彩票系统，我们致力于优质的服务，让你们玩的更开心，彩票有风险，入行需谨慎。</marquee>
              </div>
            </span>
          </div>
        </div>
<div class="list" style="bottom: 98px;">
  <div class="lay-scroll" style="padding-top: 15px;">
<div id="center">

</div>
<?
  if($username ==''){
    echo '<div class="Item SysMsg"><div class="inner"><p>请先登录账号</p></div></div>';
  }
?>
</div>

          <!---->
          <div class="el-dialog__wrapper" style="display: none;">
            <div class="el-dialog el-dialog--small chat-user-info" style="top: 15%;">
              <div class="el-dialog__header">
                <span class="el-dialog__title">
                  查看用户信息
                </span>
                <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                  <i class="el-dialog__close el-icon el-icon-close">
                  </i>
                </button>
              </div>
              <!---->
              <!---->
            </div>
          </div>
        </div>

        <div class="compose">
	 <? if($admin == '1'){ ?>
          <div class="control-bar">
			<span>管理员操作区：</span>
			 <a href="javascript:void(0)" id="send_ball_btn" title="发送红包" class="btn-control">
               <i >
                 发送红包
			  </i>
            </a>
			</div>
		<? }?>
          <div class="control-bar">
            <span>
            </span>
			<a class="btn-control">
               <i >
                 欢迎使用聊天室
			  </i>
            </a>
            <a href="javascript:void(0)" id="face_btn" title="发送表情" class="btn">
              <i class="iconfont icon-liaotianbiaoqing">
              </i>
            </a>
               <a href="javascript:void(0)" id="images_btn" title="上传图片" class="btn" style="display: none;">
               <i class="iconfont icon-erjiyemian-liaotianduihua-danchuangtianjiatupian">
              </i>
            </a>
			   <a href="javascript:void(0)" id="chat_log_btn" title="记录" class="btn-control"  style="display: none;">
               <i >
                 记录
			  </i>
            </a>
            <!---->
          </div>
          <div class="typing">
            <div class="txtinput el-textarea
            is-disabled">
            <div contenteditable="true" id="send" placeholder="请输入聊天内容"
              type="textarea" autosize="[object Object]" rows="2" autocomplete="off"
              validateevent="true" class="el-textarea__inner" style="height:
              54px;overflow: auto;"></div>
            </div>
            <div class="sendbtn">
              <button id="send_button" href="javascript:void(0)" class="u-btn1">
                发送
              </button>
            </div>
          </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<div id="face_leruge" style="position:absolute;right:1px;left: 5px;border: 1px solid #000000;padding: 2px;top:50%;background-color:#ffffff;display:none;">
	<?php
for ($x=0; $x<=70; $x++) { ?>
 <img src="/layui/images/face/<?echo $x; ?>.gif" style="cursor: pointer;" onclick="return emoji(this.src)">
<?php } ?>
	</div>
<div id="scrollchat" style="position: absolute;font-size: 12px;padding: 2px 10px;top: 30%;right: 0;border: 1px solid #aaaaaa;border-top-left-radius: 20px;border-bottom-left-radius: 20px;cursor: pointer;background: #ffffff;">滚屏>></div>
<div id="clearchat" style="position: absolute;font-size: 12px;padding: 2px 10px;top: 35%;right: 0;border: 1px solid #aaaaaa;border-top-left-radius: 20px;border-bottom-left-radius: 20px;cursor: pointer;background: #ffffff;">清屏>></div>
<div id="nicknamechat" style="position: absolute;font-size: 12px;padding: 2px 10px;top: 40%;right: 0;border: 1px solid #aaaaaa;border-top-left-radius: 20px;border-bottom-left-radius: 20px;cursor: pointer;background: #ffffff;">昵称>></div>
<div style="position: absolute;font-size: 12px;padding: 2px 10px;top: 45%;right: 0;border: 1px solid #aaaaaa;border-top-left-radius: 20px;border-bottom-left-radius: 20px;cursor: pointer;background: #ffffff;">头像>>
<form id="infoLogoForm" enctype='multipart/form-data'>
  <input type="file" id="avatarchat" name="avatar" style="opacity: 0;position: absolute;left: 0;">
  <input type="hidden" name="username" value="<?php echo $username ?>">
</form>
</div>
<script>
  var oBtn = $('#face_btn');
  oBtn.click(function () {
    $('#face_leruge').css('display', 'block');
  });

  function emoji(src) {
    $('#send').append('<img src="' + src + '" />');
    $('#face_leruge').css('display', 'none');
  }

  var username = '<?php echo $username ?>';
  var nickname = '<?php echo $nickname ?>';
  var avatar = '<?php echo $img_src ?>';
  var dataInfo = <?php echo $dataInfo ?>;
  var ws = null
  var level = '<?echo $user_vip ?>'

  function connect() {
    ws = new WebSocket("ws://58.87.102.180:8888");
    ws.onopen = function () {
      console.log('链接成功');
      var msg = '{"type": 1, "username": "'+username+'", "nickname": "'+nickname+'", "avatar": "'+avatar+'"}'
      ws.send(msg);
      for (let i in dataInfo) {
        var contentchat = dataInfo[i].msg.replace(/&lt;/g, "<")
        contentchat = contentchat.replace(/&gt;/g, ">")
        contentchat = contentchat.replace(/&#39;/g, "'")
        contentchat = contentchat.replace(/&#162;/g, "\"")
        var levelimg = '/images/vip/icon_member'+dataInfo[i].vip+'.gif'
        if (dataInfo[i].username === username) {
          var position = 'right'
        } else {
          var position = 'left'
        }
        var content = `
          <div class="Item type-${position}">
            <div class="lay-block">
              <div class="avatar" style="cursor: pointer;">
                <img src="${dataInfo[i].img}" alt="">
              </div>
              <div class="lay-content">
                <div class="msg-header">
                  <a href="#">
                    <h4 style="cursor: pointer;">${dataInfo[i].nickname}</h4>
                  </a>
                  <span>
                    <img src="${levelimg}" alt="">
                  </span>
                  <span class="MsgTime">${dataInfo[i].time}</span>
                </div>
                <div class="Bubble v${dataInfo[i].vip}">
                <p><span style="white-space: pre-wrap; word-break: break-all;">${contentchat}</span></p>
                </div>
              </div>
            </div>
          </div>
        `
        $('#center').append(content)
        setTimeout(function () {
						$('.lay-scroll').scrollTop($('.lay-scroll')[0].scrollHeight)
					}, 1000)
      }
    }
    ws.onerror = function () {
      layer.msg('链接失败，联系管理员开启聊天室', {
        icon: 5,
        time: 3000
      })
    }
    ws.onmessage = function (msg) {
      var data = $.parseJSON(msg.data)

      var contentchat = data.msg.replace(/&lt;/g, "<")
      contentchat = contentchat.replace(/&gt;/g, ">")
      contentchat = contentchat.replace(/&#39;/g, "'")
      contentchat = contentchat.replace(/&#162;/g, "\"")
      var levelimg = '/images/vip/icon_member'+data.level+'.gif'
      if (data.username === username) {
        var position = 'right'
      } else {
        var position = 'left'
      }
      var content = `
        <div class="Item type-${position}">
          <div class="lay-block">
            <div class="avatar" style="cursor: pointer;">
              <img src="${data.avatar}" alt="">
            </div>
            <div class="lay-content">
              <div class="msg-header">
                <a href="#">
                  <h4 style="cursor: pointer;">${data.nickname}</h4>
                </a>
                <span>
                  <img src="${levelimg}" alt="">
                </span>
                <span class="MsgTime">${data.time}</span>
              </div>
              <div class="Bubble v${data.level}">
              <p><span style="white-space: pre-wrap; word-break: break-all;">${contentchat}</span></p>
              </div>
            </div>
          </div>
        </div>
      `
      $('#center').append(content)
      setTimeout(function () {
        $('.lay-scroll').scrollTop($('.lay-scroll')[0].scrollHeight)
      }, 100)
    }
  }
  if (!nickname || !avatar) {
    layer.msg('请先设置昵称和头像', {
      time: 2000,
      icon: 5
    })
  } else {
    connect()
  }
  $('#send_button').click(function () {
    var contentOld = $('#send').html()
    content = contentOld.replace(/</g, "&lt;")
    content = content.replace(/>/g, "&gt;")
    content = content.replace(/"/g, "&#39;")
    content = content.replace(/'/g, "&#162;")
    if ('<?php echo $talk ?>' == 1) {
      layer.msg('充值金额大于<?php echo $limit ?>元才可以聊天', {
        icon: 5,
        time: 2000
      })
      return false
    }
    if (!content) {
      layer.msg('不允许发送空的内容！', {
        icon: 5,
        time: 2000
      })
      return false
    }
    var date = new Date()
    var time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
    var msg = '{"type": 2, "username": "'+username+'", "nickname": "'+nickname+'", "avatar": "'+avatar+'", "msg": "'+content+'", "level": "'+level+'", "time": "'+time+'"}'
    ws.send(msg)
		$('#send').html('')
    $.ajax({
      type: 'post',
      url: 'chatsend.php',
      data: {'username': username, nickname: nickname, avatar: avatar, msg: content, level: level, time: time, vip: level},
      dataType: 'json',
      success: function (data) {
        // console.log(data)
      }
    })
  })

  $('#scrollchat').click(function () {
    $('.lay-scroll').scrollTop($('.lay-scroll')[0].scrollHeight)
  })
  $('#clearchat').click(function () {
    $('#center').html('')
  })
  $('#nicknamechat').click(function () {
    if (nickname) {
      layer.msg('昵称已设置过，不允许重复设置', {
        time: 2000,
        icon: 5
      })
    } else {
      layer.prompt(function (value, index, elem) {
        $.ajax({
          url:'chatnickname.php',
          type: 'post',
          data: {username: username, nickname: value},
          dataType: 'json',
          success: function (data) {
            layer.close(index)
            layer.msg(data.msg)
          }
        })
      })
    }
  })
  $('#avatarchat').click(function () {
    if (avatar) {
      layer.msg('头像已设置')
      return false
    }
  })
  $('input[name=avatar]').change(function () {
    $.ajax({
        url:'chatavatar.php',
        type:'post',
        cache: false,
        data: new FormData($('#infoLogoForm')[0]),
        processData: false,
        contentType: false,
        dataType:'json',
		    async: false,
        success:function(data) {
            if (data.code == 1) {
              layer.msg(data.msg, {
                icon: 6,
                time: 2000
              })
            } else {
              layer.msg(data.msg, {
                icon: 5,
                time: 2000
              })
            }
        },
        error: function() {
            console.log('error')
        }
    })
  })
</script>
  </body>

</html>
